<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
  <th:block th:include="include :: header('预警设置')" />
  <!-- <link rel="stylesheet" href="/js/layui/css/layui.css" th:href="@{/js/layui/css/layui.css}" /> -->
  <th:block th:include="include :: layout-latest-css" />
  <th:block th:include="include :: ztree-css" />
  <style>
    .flex {
      display: flex;
    }

    .form-horizontal .control-label {
      text-align: left;
    }
  </style>
</head>

<body class="gray-bg">
  <div class="container-div">
    <div class="row">
      <div class="col-sm-12 search-collapse">
        <form id="notice-form">
          <div class="select-list">
            <ul>
              <li>
                <div class="btn-group-sm" id="toolbar" role="group">
                  <a class="btn btn-success" onclick="addFull()" shiro:hasPermission="system:notice:add">
                    <i class="fa fa-plus"></i> 新增
                  </a>
                </div>
              </li>
              <li>
                预警名称：
                <input type="text" name="warningName" placeholder="请输入预警名称" />
              </li>

              <li>
                场景名称:
                <input type="text" name="sceneName" placeholder="请输入场景名称" class="layui-input startTime" />
              </li>
              <li>
                开始时间：
                <input type="date" name="reostartTime" class="layui-input startTime" />

              </li>
              <li>
                结束时间：
                <input type="date" name="reoendTime" class="layui-input startTime" />

              </li>

              <li>
                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                    class="fa fa-search"></i>&nbsp;搜索</a>
                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                    class="fa fa-refresh"></i>&nbsp;重置</a>
              </li>
            </ul>
          </div>
        </form>
      </div>

      <div class="col-sm-12 select-table table-striped">
        <table id="bootstrap-table"></table>
      </div>
    </div>
  </div>
  <!-- 修改 -->
  <div class="modal" id="edit-scene-dialog" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content animated flipInY">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">编辑预警</h4>
        </div>

        <div class="modal-body">
          <!-- <input type="hidden" name="sceneId" id="current-scene-id" value="" /> -->
          <form class="form-horizontal m" id="form-frequency-edit">
            <input name="id" type="hidden" id="Id" />
            <!-- <div class="form-group">
              <label class="col-sm-3 control-label">场景编号:</label>
              <div class="col-sm-8">
                <input name="sceneId" class="form-control" type="text" required />
              </div>
            </div> -->
            <!-- <div class="form-group">
              <label class="col-sm-3 control-label">预警ID:</label>
              <div class="col-sm-8">
                <input name="warningCode" class="form-control" type="text" required />
              </div>
            </div> -->
            <div class="form-group">
              <label class="col-sm-3 control-label">预警名称:</label>
              <div class="col-sm-8">
                <input name="warningName" id="warningName2" class="form-control" type="text" required />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">预警类型:</label>
              <div class="col-sm-8">
                <select name="warningType" id="warningType2" lay-verify="required" class="form-control">
                  <option value=""></option>
                  <option value="0">同比预警</option>
                  <option value="1">环比预警</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">启用状态:</label>
              <div class="col-sm-8">
                <select name="status" id="status" lay-verify="required" class="form-control">
                  <option value=""></option>
                  <option value="0">启用</option>
                  <option value="1">禁用</option>
                </select>
              </div>
            </div>
            <div class="control-label is-required">预测周期(天)：</div>
            <div class="input-wrap">
              <input class="form-control" type="number" name="day" oninput="if(value>365)value=365" id="day2"
                value="" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-white" data-dismiss="modal">
            关闭
          </button>
          <button type="button" class="btn btn-primary" onclick="submitEditScene()">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- 新增 -->
  <div class="modal" id="add-scene-dialog" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content animated flipInY">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">新增预警</h4>
        </div>

        <div class="modal-body">
          <form class="form-horizontal m" id="form-frequency-add">
            <!-- <input name="sceneId" type="hidden" id="sceneId" /> -->
            <div class="control-label is-required">预警名称：</div>
            <div class="input-wrap">
              <input class="form-control" name="warningName" id="warningName" value="" />
            </div>
            <div class="control-label is-required">预警类型：</div>
            <div class="input-wrap">
              <select name="warningType" id="warningType" style="max-width: 500px" class="second form-control m-b">
                <option value="">请选择</option>
                <option value="0">同比</option>
                <option value="1">环比</option>
                <option value="2">离散</option>
              </select>
            </div>
            <div class="control-label is-required">预警对象：</div>
            <div class="input-wrap">
              <div class="flex">
                <select name="sceneId" id="first" style="max-width:120px" class="first form-control m-b">
                  <option value="">请选择</option>
                </select>
                <select name="pointId" id="second" style="max-width:120px" class="second form-control m-b">
                  <option value="">请选择</option>
                </select>
                <!-- <select name="dev_azdw2_id" id="second" style="max-width:120px" class="second form-control m-b">
                  <option value="">请选择</option>
                </select>
                <select name="dev_azdw3_id" id="third" style="max-width:120px" class="third form-control m-b">
                  <option value="">请选择</option>
                </select> -->
              </div>
            </div>
            <!-- <div class="input-wrap">
              <div class="flex">
                <select name="dev_azdw1_id" id="first" style="max-width:120px" class="first form-control m-b">
                  <option value="">请选择</option>
                </select>
                <select name="dev_azdw2_id" id="second" style="max-width: 120px" class="second form-control m-b">
                  <option value="">请选择</option>
                </select>
                <select name="dev_azdw3_id" id="third" style="max-width: 120px" class="third form-control m-b">
                  <option value="">请选择</option>
                </select>
                <select name="dev_azdw4_id" id="fourth" style="max-width: 120px" class="fourth form-control m-b">
                  <option value="">请选择</option>
                </select>
                <select name="dev_azdw5_id" id="fifth" style="max-width: 120px" class="fifth form-control m-b">
                  <option value="">请选择</option>
                </select>
              </div> -->
            <div class="control-label is-required">预测周期(天)：</div>
            <div class="input-wrap">
              <input class="form-control" type="number" name="day" oninput="if(value>365)value=365" id="day" value="" />
            </div>
        </div>
        <!-- <div class="form-group">
                <label class="col-sm-3 control-label">预警名称:</label>
                <div class="col-sm-8">
                  <input
                    name="warningName"
                    id="sceneId"
                    class="form-control"
                    type="text"
                    required
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">预警类型:</label>
                <div class="col-sm-8">
                  <select
                    name="warningSelect"
                    id="sel"
                    lay-verify="required"
                    class="form-control"
                  >
                    <option value=""></option>
                    <option value="0">同比预警</option>
                    <option value="1">环比预警</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <div class="layui-form-item history">
                  <div class="control-label">历史场景：</div>
                  <div class="input-wrap">
                    <div class="flex">
                      <select
                        name="dev_azdw1_id"
                        id="first"
                        style="max-width: 120px"
                        class="first form-control m-b"
                      >
                        <option value="">请选择</option>
                      </select>
                      <select
                        name="dev_azdw2_id"
                        id="second"
                        style="max-width: 120px"
                        class="second form-control m-b"
                      >
                        <option value="">请选择</option>
                      </select>
                      <select
                        name="dev_azdw3_id"
                        id="third"
                        style="max-width: 120px"
                        class="third form-control m-b"
                      >
                        <option value="">请选择</option>
                      </select>
                      <select
                        name="dev_azdw4_id"
                        id="fourth"
                        style="max-width: 120px"
                        class="fourth form-control m-b"
                      >
                        <option value="">请选择</option>
                      </select>
                      <select
                        name="dev_azdw5_id"
                        id="fifth"
                        style="max-width: 120px"
                        class="fifth form-control m-b"
                      >
                        <option value="">请选择</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div> -->
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-white" data-dismiss="modal">
          关闭
        </button>
        <button type="button" class="btn btn-primary" onclick="submitAddScene()">
          保存
        </button>
      </div>
    </div>
  </div>
  <!-- <div class="modal-dialog">
        <div class="modal-content animated flipInY">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span
              ><span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title">新增预警</h4>
          </div>

          <div class="modal-body">
            <div class="control-label is-required">预警名称：</div>
            <div class="input-wrap">
              <input
                class="form-control"
                type="number"
                name="maximum"
                id="scene1"
                value=""
              />
            </div>
            <div class="control-label is-required">预警类型</div>
            <div class="input-wrap">
              <select
                name="dev_azdw2_id"
                id="devName"
                style="max-width: 500px"
                class="second form-control m-b"
              >
                <option value="">请选择</option>
                <option value="0">同比</option>
                <option value="1">环比</option>
              </select>
            </div>

            <div class="control-label">历史场景：</div>
            <div class="input-wrap">
              <div class="flex">
                <select
                  name="dev_azdw1_id"
                  id="first"
                  style="max-width: 120px"
                  class="first form-control m-b"
                >
                  <option value="">请选择</option>
                </select>
                <select
                  name="dev_azdw2_id"
                  id="second"
                  style="max-width: 120px"
                  class="second form-control m-b"
                >
                  <option value="">请选择</option>
                </select>
                <select
                  name="dev_azdw3_id"
                  id="third"
                  style="max-width: 120px"
                  class="third form-control m-b"
                >
                  <option value="">请选择</option>
                </select>
                <select
                  name="dev_azdw4_id"
                  id="fourth"
                  style="max-width: 120px"
                  class="fourth form-control m-b"
                >
                  <option value="">请选择</option>
                </select>
                <select
                  name="dev_azdw5_id"
                  id="fifth"
                  style="max-width: 120px"
                  class="fifth form-control m-b"
                >
                  <option value="">请选择</option>
                </select>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-white" data-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="submitAddScene()"
            >
              保存
            </button>
          </div>
        </div>
      </div> -->
  </div>
  <th:block th:include="include :: footer" />
  <th:block th:include="include :: ztree-js" />
  <script src="/js/layui/layui.js" th:src="@{/js/layui/layui.js}"></script>
  <script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('tongjiNew:forecastSettings:edit') }]];
    var removeFlag = [[${@permission.hasPermi('system:notice:remove') }]];
    var types = [[${@dict.getType('sys_notice_type') }]];
    var datas = [[${@dict.getType('sys_notice_status') }]];
    // var prefix = "http://localhost:8002/";
    var pointName = null;
    $(function () {
      var options = {
        url: "/earlyWarning/list1",
        // createUrl: "/add",
        // updateUrl: "/tongjiNew/forecastSettings/edit/{id}",
        // removeUrl: "/earlyWarning/remove",
        // contentType: 'application/json',
        modalName: "预警",
        columns: [{
          checkbox: true
        },
        {
          field: "sceneName",
          title: "场景名称",
          width: "10%",
          align: "center",
        },
        {
          field: "warningName",
          title: "预警名称",
          width: "15%",
          align: "center",
        },
        {
          field: "createTime",
          title: "创建时间",
          width: "15%",
          align: "center",
        },
        {
          field: "createBy",
          title: "创建人",
          width: "10%",
          align: "center",
        },
        {
          field: 'warningType',
          title: '预警方式',
          width: "10%",
          align: "center",
          formatter: function (value, row, index) {
            if (value == 0) {
              return warningType = '同比预警'
            } else if(value == 1){
              return warningType = '环比预警'
            }else if(value == 2){
              return warningType = '离散预警'
            }
          }
        },
        {
          visible: editFlag == 'hidden' ? false : true,
          title: '启用状态',
          width: "10%",
          align: 'center',
          formatter: function (value, row, index) {

            return statusTools(row);
          }
        },

        {
          title: '操作',
          width: "15%",
          align: 'center',
          formatter: function (value, row, index) {
            // console.log(row)
            var actions = [];
            actions.push(`<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="edit('${row.id},${row.warningName},${row.warningType},${row.status},${row.sceneName},${row.days}')"><i class="fa fa-edit"></i>编辑</a> `);
            // actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editFull(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
            // actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
            actions.push(`<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="remove('${row.id}')"><i class="fa fa-remove"></i>删除</a>`);
            return actions.join('');
          }
        }]
      };
      $.table.init(options);

    });

    // 添加的树状组件
    // var tree = layui.tree;
    // $(".selectSpan").on("click", function () {
    //   $("#selectData").fadeIn();
    //   $.ajax({
    //     method: "get",
    //     url: "*",
    //     success: function (res) {
    //       console.log(res, 9977)
    //       var tree = layui.tree;
    //       var inst1 = tree.render({
    //         elem: "#selectData",
    //         data: res.data,
    //         click: function (obj) {
    //           $("#selectData").fadeOut();
    //           // $(".selectSpan").html(obj.data.title);
    //           $("input[name='sceneName']").attr('value', obj.data.title);
    //           console.log("obj.data.title=======", obj.data.title);
    //           // earlyWarningData.sceneId = obj.data.id;
    //           $("input[name='sceneId']").attr('value', obj.data.id);
    //         },
    //       });
    //     },
    //   });
    // });
    // 新增
    function addFull() {
      $('#add-scene-dialog').modal('show');
    }

    initfirst()
    //新增场景下拉框

    function initfirst() {
      $.ajax({
        method: "get",
        url: "/youtian/scene-category/list",
        data: {
          pageNum: 1,
          pageSize: 1000
        },
        success: function (result) {
          console.log(result.rows, 'res');
          var rows = result.rows;
          var html = `<option value="">请选择</option>`
          for (let i = 0; i < rows.length; i++) {
            html += `<option value="` + rows[i].sceneId + `">` + rows[i].sceneName + `</option>`
          }
          $("#first").html(html);
          $("#first").change(function () {
            $("#dev_azdw1_name").val($(this).find('option:selected').text());
            initsecond($("#first").val());
          });
        },
        error: function (error) {
          $.modal.alertWarning(error);
        }
      });
    }
    function initsecond(id) {
      console.log(id);
      $.ajax({
        method: "get",
        url: "/youtian/scene-category/scencePointlist",
        data: {
          pageNum: 1,
          sceneId: id,
          pageSize: 1000
        },
        success: function (result) {
          console.log(result.rows, 'res');
          var rows = result.rows;
          var html = `<option value="">请选择</option>`
          for (let i = 0; i < rows.length; i++) {
            html += `<option value="` + rows[i].pointId + `">` + rows[i].pointName + `</option>`
          }
          $("#second").html(html);
          $("#second").change(function () {
            $("#dev_azdw2_name").val($(this).find('option:selected').text());
            pointName = $("#second").find("option:selected").text();
          });
        },
        error: function (error) {
          $.modal.alertWarning(error);
        }
      });
    }


    // 添加保存按钮
    function submitAddScene() {
      // if ($.validate.form()) {
      //   $.operate.post('/earlyWarning/add', $('#form-frequency-add').serialize());
      // }
      let data = {
        warningName: $('#warningName').val(),
        warningType: $("#warningType").val(),
        day: $('#day').val(),
        sceneId: $('#first').val(),
        description: pointName,
        sourceTag: $('#second').val()
      }
      console.log(data);
      $.ajax({
        url: '/earlyWarning/addupda',
        method: 'post',
        headers: { "Content-Type": "application/json" },
        data: JSON.stringify(data),
        success: function (res) {
          console.log(res);
          $('#add-scene-dialog').modal('hide');
          $.modal.msg('操作成功')
          $.table.refresh()
          $('#warningName').val('')
          $("input[name='warningCode']").val("");
          $("#warningType").val('')
          $("#day").val('')
          $("#first").val('')
          $("#second").val('')
        }
      })

    }

    //修改
    function edit(row) {
      // console.log(row,999)
      var row = row.split(',')
      console.log(row);
      $('#Id').val(row[0])
      $('#warningName2').val(row[1])
      $('#edit-scene-dialog').modal('show');
      $('#day2').val(row[5])
    }
    //修改提交
    function submitEditScene() {
      // if ($.validate.form()) {
      //   $.operate.save('/earlyWarning/edit', $('#form-frequency-edit').serialize());
      // }
      $.ajax({
        url: '/earlyWarning/edit',
        method: 'post',
        headers: { "Content-Type": "application/json" },
        data: JSON.stringify({
          warningName: $('#warningName2').val(),
          warningType: $("#warningType2").val(),
          day: $('#day2').val(),
          status: $('#status').val(),
          id: $('#Id').val()
        }),
        success: function (res) {
          console.log(res);
          $('#edit-scene-dialog').modal('hide');
          $.modal.msg('操作成功')
          $.table.refresh()
          $("#warningName2").val("");
          $("#warningType2").val("");
          $("#status").val("");
          $("#day2").val("");
        }
      })

    }
    /* 状态显示 */
    function statusTools(row) {
      if (row.status == 1) {
        return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> ';
      } else {
        return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> ';
      }
    }
    /* 状态-停用 */
    function disable(id) {
      $.modal.confirm("确认要停用该预警吗？", function () {
        $.operate.post("/earlyWarning/changeEarlyWaringStatus", { "ids": id, "status": 1 });
      })
    }

    /* 状态-启用 */
    function enable(id) {
      $.modal.confirm("确认要启用该预警吗？", function () {
        $.operate.post("/earlyWarning/changeEarlyWaringStatus", { "ids": id, "status": 0 });
      })
    }

    //删除预警信息
    function remove(row) {
      let rowJson = row.split(',')
      let id = rowJson[0];
      let content = `是否删除当前预警信息`;
      $.modal.confirm(content, function (index) {
        let list = {
          ids: id,
        }
        $.ajax({
          url: `/earlyWarning/remove?ids=${id}`,
          method: "POST",
          // dataType: "json",
          // data: JSON.stringify(list),
          // data: JSON.stringify({
          //   ids:id
          // }),
          contentType: "application/json",
          success: function (res) {
            console.log(res, '--->');
            if (res.code === 0) {
              $.table.refresh()
              $.modal.msg('删除成功')
            }
          }
        })
      });
    }
  </script>
</body>

</html>